{include file="public/header" /} {include file="public/menu" /}
<form class="layui-form" action="">
    <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
        <ul class="layui-tab-title site-demo-title">
            <li><a href="{:url('article/index')}">文章管理</a></li>
            <li class="layui-this"><a href="{:url('article/postdata')}">{if isset($article_info['id'])} 修改{else}添加{/if}文章</a></li>
        </ul>
        <div class="layui-body layui-tab-content site-demo site-demo-body">
            <div class="layui-main">


                <!--标题-->
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title"  id="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" {if isset($article_info['title'])} value="{$article_info['title']}" {/if}>
                    </div>
                </div>


                <!--文章分类-->
                <div class="layui-form-item">
                    <label class="layui-form-label">文章分类</label>
                    <div class="layui-input-inline">
                        <select name="cid" id="cid">
                            <option value="">请选择分类</option>
                            {volist name="cate" id="vo"}
                                <option value="{$vo.id}" {if isset($article_info['cid'])&& $article_info['cid']==$vo.id } selected="" {/if}>{$vo.name} </option>
                                {volist name="vo.cate_second" id="v"}
                                    <option value="{$v.id}" {if isset($article_info['cid'])&& $article_info['cid']==$v.id } selected="" {/if}>&nbsp;&nbsp;&nbsp;&nbsp;-- {$v.name} </option>
                                {/volist}
                            {/volist}
                        </select>
                    </div>
                </div>





                <!--排列顺序-->
                <div class="layui-form-item">
                    <label class="layui-form-label">排列顺序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="displayorder" lay-verify="required" id="displayorder" placeholder="请输入排列顺序" autocomplete="off" class="layui-input" {if isset($article_info['displayorder'])} value="{$article_info['displayorder']}"  {/if} >
                    </div>
                </div>


                <!--点击量-->
                <div class="layui-form-item">
                    <label class="layui-form-label">点击量</label>
                    <div class="layui-input-inline">
                        <input type="text" name="views" lay-verify="required" id="views" placeholder="请输入点击量" autocomplete="off" class="layui-input" {if isset($article_info['views'])} value="{$article_info['views']}"  {/if} >
                    </div>
                </div>


                <!--是否显示-->
                <div class="layui-form-item">
                    <label class="layui-form-label">是否显示</label>
                    <div class="layui-input-block status">
                        <input type="checkbox" id="status" name="status" lay-skin="switch" lay-filter="switchTest" lay-text="是|否" {if isset($article_info['status'])&& $article_info['status']==0} {else} checked{/if}>
                    </div>
                </div>


                <!--外链-->
                <div class="layui-form-item">
                    <label class="layui-form-label">外链</label>
                    <div class="layui-input-block">
                        <input type="text" name="link"  id="link" lay-verify="title" autocomplete="off" placeholder="请输入外链" class="layui-input" {if isset($article_info['link'])} value="{$article_info['link']}" {/if}>
                    </div>
                </div>

                <!--文章封面-->
                <div class="layui-upload" style="margin-top: 10px;">
                    <label class="layui-form-label">文章封面</label>
                    <button  id="file_poster" style="margin-top: 10px;" type="button" class="layui-btn">点击上传(1920X600)</button ">
                </div>
                <div class="layui-upload" style="margin-top: 10px;">
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="poster">
                        {if isset($article_info['poster'])&&$article_info['poster']}
                        <img id="poster" height="100" src="{$article_info['poster']}" alt="">
                        {/if}
                    </div>
                </div>


                <!--视频封面-->
                <div class="layui-upload" style="margin-top: 10px;">
                    <label class="layui-form-label">视频封面</label>
                    <button  id="file_videoposter" style="margin-top: 10px;" type="button" class="layui-btn">点击上传(860X530)</button ">
                </div>
                <div class="layui-upload" style="margin-top: 10px;">
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="videoposter">
                        {if isset($article_info['videoposter'])&&$article_info['videoposter']}
                        <img id="videoposter" height="100" src="{$article_info['videoposter']}" alt="">
                        {/if}
                    </div>
                </div>


                <!--视频-->
                <div class="layui-upload" style="margin-top: 10px;">
                    <label class="layui-form-label">上传视频</label>
                    <button  id="file_video" style="margin-top: 10px;" type="button" class="layui-btn">点击上传</button ">
                </div>
                <div class="layui-upload" style="margin-top: 10px;">
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="video">
                        {if isset($article_info['video'])&&$article_info['video']}
                        <video id="video" height="100" src="{$article_info['video']}" alt="" controls="controls">
                            {/if}
                    </div>
                </div>


                <!--富文本-->
                <div class="layui-form-item">
                    <label class="layui-form-label">富文本</label>
                    <div class="layui-input-block">
                        <script id="container" name="content" type="text/plain">
                             {if isset($article_info['content'])}  {$article_info['content']} {/if}
                        </script>
                    </div>
                </div>


                <label class="layui-form-label"></label>
                <button lay-filter="save" type="button" class="layui-btn  save">保存</button>
                <input name="id" id="id" type="hidden" {if isset($article_info['id'])}  value="{$article_info['id']}" {/if}>
            </div>
        </div>
    </div>
</form>
{include file="public/footer" /}

<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/admin/Ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/admin/Ueditor/ueditor.all.js"></script>

<script type="text/javascript">
    var ue = UE.getEditor('container', {
        initialFrameWidth : 800,
        initialFrameHeight: 400
    });
    //上传文章封面
    layui.use('upload', function(){
        var $ = layui.$
        var upload = layui.upload;

        //上传文章封面
        upload.render({
            elem: '#file_poster', //绑定元素
            url: "{:url('Common/upload')}", //上传接口
            accept:'image',
            done: function(res){
                var html='<img id="poster" height="100" src="'+res.filepath+'" alt="">';
                $('.poster').html(html)
            },
            error: function(){
                layer.msg('上传失败');
            }
        });

        //上传视频封面
        upload.render({
            elem: '#file_videoposter', //绑定元素
            url: "{:url('Common/upload')}", //上传接口
            accept:'image',
            done: function(res){
                var html='<img id="videoposter" height="100" src="'+res.filepath+'" alt="">';
                $('.videoposter').html(html)
                layer.msg('上传成功');
            },
            error: function(){
                layer.msg('上传失败');
            }
        });

        //上传视频
        upload.render({
            elem: '#file_video', //绑定元素
            url: "{:url('Common/upload')}", //上传接口
            accept:'file',
            done: function(res){
                var html='<video id="video" height="100" src="'+res.filepath+'" alt="" controls="controls">';
                $('.video').html(html)
            },
            error: function(){
                layer.msg('上传失败');
            }
        });

    });



    layui.use(['layer', 'form'], function() {
        var $ = layui.$, //重点处
            layer = layui.layer,
            status,
            id=$('#id').val()?$('#id').val():0;

        $('.save').click(function(){
            var displayorder=$('#displayorder').val(), //排列顺序
                link=$('#link').val(), //外链
                cid=$('#cid').val(), //分类id
                views=$('#views').val(), //分类id
                title=$('#title').val(), //标题
                poster=$("#poster").attr('src'),
                videoposter=$("#videoposter").attr('src'),
                video=$("#video").attr('src'),
                content=ue.getContent();
            //是否显示
            if($('.status').find('.layui-unselect').hasClass('layui-form-onswitch')){
                status='1';
            }else{
                status='0';
            }


            //正则验证

            if (title == "" || title == null ) {
                layer.msg('请填写文章标题');
                return false;
            }

            if (cid == "" || cid == null ) {
                layer.msg('请选择文章分类');
                return false;
            }

            $.ajax({
                type: "post",
                url: "{:url('article/postdata')}",
                data:{
                    'id':id,
                    'title':title,
                    'cid':cid,
                    'poster':poster,
                    'link':link,
                    'video':video,
                    'videoposter':videoposter,
                    'displayorder':displayorder,
                    'views':views,
                    'status':status,
                    'content':content
                },
                success: function(data) {
                    var res = JSON.parse(data);
                    if (res.status == '201') {
                        layer.msg(res.msg);
                    } else if (res.status == '200') {
                        location.href = '{:url("article/index")}';
                    }
                }
            });
        })
    });
</script>

